<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>我的博客列表</title>
		<script src="/js/axios.js"></script>
		<script src="/js/vue.js"></script>
		<script src="/js/element-ui/index.js"></script>
		<link rel="stylesheet" type="text/css" href="/js/element-ui/index.css" />
	</head>
	<body>
		<div id="box">
			<el-container>
				<el-header>
					<div th:include="~{common/nav-head::head}"></div>
				</el-header>
				<el-container>
					<el-main style="margin-top: 5vw;">
						<table style="margin-left: 8vw;">
							<tr v-for="item in myBlogs">
								<td>
									<div id="title4">
										<span style="margin-left: 2px;">{{item.title}}</span>
									</div>
									<div>
										<span style="color: black;margin-left: 15px; font-size: 13px;">
											摘要:{{item.digest}}
										</span>&nbsp;
										<span style="text-decoration: underline;color: steelblue;cursor: pointer;
										 font-size: 13px;" @click="toReadAll(item.id,item.contentId)">
											阅读全文
										</span>
										<br />
										<div>
											<span style="margin-left: 50vw;color: black;font-size: 10px;">发表时间:{{item.createTime}}</span>
										</div>
									</div>
									<hr />
								</td>
								<td>
									&nbsp;&nbsp;<el-button icon="el-icon-edit-outline" @click="change(item.id)"></el-button>
									<el-button type="danger" icon="el-icon-delete" @click="del(item.id)"></el-button>
								</td>
							</tr>
						</table>
					</el-main>
				</el-container>
			</el-container>
		</div>
	</body>
	<script>
		new Vue({
			el: "#box",
			data: {
				myBlogs:[]
			},
			methods: {
				toReadAll(blogId,contentId) {
					sessionStorage.setItem("blogId",blogId)
					sessionStorage.setItem("contentId", contentId)
					window.location.href = "/api/public/blog/go2ReadAll"
				},
				del(blogId){
					let _this = this
					axios.get("/api/cons/blog/deleteById/"+blogId)
					.then(function(response){
						_this.myBlogs = response.data.data
						window.location.href = "/api/cons/blog/go2FindMyBlogs"
					})
				},
				change(blogId){
					sessionStorage.setItem("blogId",blogId)
					window.location.href = "/api/cons/blog/go2Update"
				}
			},
			mounted() {
				let _this = this
				axios.get("/api/cons/blog/findMyBlogs")
				.then(function(response){
					_this.myBlogs = response.data.data
				})
			}
		})
	</script>
	<style>
		#title4 {
			background-color: #B3D8FF;
			height: 25px;
			line-height: 25px;
			color: white;
			font-size: 13px;
			margin-top: 1vw;
			margin-left: 2px;
		}
	</style>
</html>
